<template>
	<view class="container">
		<!-- <u-parse :content="content" @navigate="navigate"></u-parse> -->
		<view class="relativeContent">
			<block>
				<image :src="detail.image" />
				<view :style="{fontSize:titleSize}"> {{detail.title}} </view>
				<view :style="{fontSize:desSize}">{{detail.create_at}}~{{detail.end_at}}</view>
			</block>

			<uni-section>
				<view class="example-body">
					<uni-row class="demo-uni-row" :gutter="gutter" :width="nvueWidth">
						<uni-col :span="8">
							<view class="demo-uni-col dark">报名状态</view>
						</uni-col>
						<uni-col :span="16">
							<view class="demo-uni-col light"></view>
						</uni-col>
					</uni-row>

					<uni-row class="demo-uni-row" :gutter="gutter" :width="nvueWidth">
						<uni-col :span="8">
							<view class="demo-uni-col dark">报名截止时间</view>
						</uni-col>
						<uni-col :span="16">
							<view class="demo-uni-col light">{{detail.end_at}}</view>
						</uni-col>
					</uni-row>

					<uni-row class="demo-uni-row" :gutter="gutter" :width="nvueWidth">
						<uni-col :span="8">
							<view class="demo-uni-col dark">人数限定</view>
						</uni-col>
						<uni-col :span="16">
							<view class="demo-uni-col light">{{detail.number}}/{{detail.total}}</view>
						</uni-col>
					</uni-row>

					<uni-row class="demo-uni-row" :gutter="gutter" :width="nvueWidth">
						<uni-col :span="8">
							<view class="demo-uni-col dark">审核规则</view>
						</uni-col>
						<uni-col :span="16">
							<view class="demo-uni-col light"></view>
						</uni-col>
					</uni-row>

					<uni-row class="demo-uni-row" :gutter="gutter" :width="nvueWidth">
						<uni-col :span="8">
							<view class="demo-uni-col dark">取消规则</view>
						</uni-col>
						<uni-col :span="16">
							<view class="demo-uni-col light"></view>
						</uni-col>
					</uni-row>

					<uni-row class="demo-uni-row" :gutter="gutter" :width="nvueWidth">
						<uni-col :span="8">
							<view class="demo-uni-col dark">活动地点</view>
						</uni-col>
						<uni-col :span="16">
							<view class="demo-uni-col light"></view>
						</uni-col>
					</uni-row>
				</view>
			</uni-section>

			<view class="current_color">
				<u-parse :content="detail.content" @navigate="navigate"></u-parse>
			</view>
		</view>

		<button class="signUpbutton"  @click="switchBtn('left', 'bottom')">报名</button>

	</view>

</template>

<script>
	import uParse from "@/components/feng-parse/parse.vue"
	import {
		getNotice
	} from '@/pages/api/seek.js'
	export default {
		components: {
			uParse
		},
		data() {
			return {
				content: '',
				gutter: 0,
				nvueWidth: 730,
				detail: {}
			}
		},
		onLoad(option) {
			console.log("onLoad")
			console.log(option)
			let item = JSON.parse(decodeURIComponent(option.item));
			this.loadActivity(item)
		},
		methods: {
			navigate(e) {
				console.log(e)
			},
			loadActivity(item) {
				console.log("loadActivity")
				this.detail = item
				console.log("detail:", this.detail)
				// getNotice(id).then(data => {
				// 	this.content = data.noticeContent;
				// 	console.log(this.content);
				// 	// 处理数据...  
				// }).catch(error => {
				// 	console.error('Error fetching data with params:', error);
				// });
			},
		}
	}
</script>

<style lang="scss">
	.demo-uni-row {
		margin-bottom: 10px;

		// 组件在小程序端display为inline
		// QQ、抖音小程序文档写有 :host，但实测不生效
		// 百度小程序没有 :host
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}

	// 支付宝小程序没有 demo-uni-row 层级
	// 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	::v-deep .uni-row {
		margin-bottom: 10px;
	}

	/* #endif */

	.demo-uni-col {
		height: 36px;
		border-radius: 5px;
	}

	.dark_deep {
		background-color: #99a9bf;
	}

	.dark {
		background-color: #d9e2ec;
	}

	.light {
		background-color: #e5e9f2;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 5rpx 10rpx 0;
		overflow: hidden;
	}

	.sim-list {
		background: #fff;
		border-bottom: 1px solid #eee;
		padding: 28rpx;
		line-height: 1.3;

		&>view:not(:last-child),
		&_bigImg {
			margin-top: 18rpx;
		}

		.simTitle {
			height: 50rpx;
			overflow: hidden;
			margin-bottom: 10rpx;
		}

		.simSubTitle {
			height: 80rpx;
			overflow: hidden;
			line-height: 1.5;
		}

		.simTime {
			text-align: right;
		}

		.simDescription {
			height: 80rpx;
			overflow: hidden;
			line-height: 1.5;
		}

		.simDescriptionColor {
			color: #ff0000;
		}

		// &_subTitle{
		//     margin-top: 18rpx;
		// }
		&_description {
			color: #999;
			// margin-top: 18rpx;
		}

		&_bigImg {
			width: 100%;
			height: 260rpx;
			object-fit: contain;
			border-radius: 10rpx;
			// margin-top: 18rpx;
		}

		&-imgPart {
			display: flex;

			&.imgPartRight {
				flex-direction: row-reverse;

				.sim-list_text {
					padding-left: 0;
					padding-right: 20rpx;

				}
			}

			image {
				width: 200rpx;
				height: 200rpx;
				object-fit: contain;
			}

			.sim-list_text {
				width: calc(100% - 200rpx);
				padding-left: 20rpx;
				height: 200rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
		}
	}

	.relativeContent {
		position: relative;
		height: 100%;
		/* 滚动内容高度 */
		padding-bottom: 150px;
		/* 为固定按钮预留空间 */
		overflow: hidden;
		/* 隐藏溢出内容，避免内部元素超出容器 */
	}

	.signUpbutton {
		position: fixed;
		/* 固定定位 */
		bottom: 0;
		/* 紧贴底部 */
		left: 0;
		/* 紧贴左侧，可以根据需要调整 */
		width: 100%;
		/* 宽度占满整个屏幕 */
		height: 60px;
		/* 按钮高度 */
		background-color: #aaaaff;
		/* 背景色，可根据需要调整 */
		display: flex;
		/* 弹性布局 */
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
		/* 底部阴影，增强立体感 */
	}
</style>